<template>
	<view>
		<view class="connect-status">
			<text :class="'connect-' + connectInfo.status">{{connectInfo.titles[connectInfo.status]}}</text>
		</view>
		<view class="cell-box" :style="{width:(maxGroup.length * 100) + 'px'}">
			
			<view class="cell-group" v-for="(it, index) in maxGroup">
				<view class="cell" v-for="item in cell[index + 1]" :style="{backgroundColor: item.online ? classColor[item.classId] : '#2c2c2c'}">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="connect-message">
			{{message}}
		</view>
	</view>
</template>

<script>
	export default {
		name:"raid-info",
		data() {
			return {
				connectInfo: {
					status: 0,
					titles: [
						"未连接",
						"连接中",
						"已连接",
						"连接失败"
					]
				},
				maxGroup: [],
				cell: {
					1: [],
					2: [],
					3: [],
					4: [],
					5: [],
					6: [],
					7: [],
					8: []
				},
				classNames: {
				    "1": "战士",
				    "2": "圣骑士",
				    "3": "猎人",
				    "4": "盗贼",
				    "5": "牧师",
				    "6": "死亡骑士",
				    "7": "萨满",
				    "8": "法师",
				    "9": "术士",
				    "A": " 武僧",
				    "B": "德鲁伊",
				    "C": "恶魔猎手",
				    "D": "唤魔师‌"
				},
				classColor: {
				    "1": "#C79C6E", // 战士
					"2": "#F58CBA", // 圣骑士
					"3": "#ABD473", // 猎人
					"4": "#FFF569", // 盗贼
					"5": "#FFFFFF", // 牧师
					"6": "#C41E3A", // 死亡骑士
					"7": "#0070DD", // 萨满
					"8": "#69CCF0", // 法师
					"9": "#9482C9", // 术士
					"A": "#00FF96", // monk
					"B": "#FF7D0A", // 德鲁伊
					"C": "#A330C9", // 恶魔猎手
					"D": "#7F3FBF"  // 唤魔师
				},
				message: ""
			};
		},
		
		
		created() {
			
			this.connectInfo.status = 1
			uni.connectSocket({
				url: 'ws://127.0.0.1:8082/ws'
			})
			uni.onSocketOpen(() => {
				this.connectInfo.status = 2
			})
			uni.onSocketError(() => {
				this.connectInfo.status = 3
			})
			uni.onSocketMessage((res) => {
				// console.log(res);
				this.message = res.data
				this.marginData(res.data)
			})
		},
		
		methods: {
			
			resetCell() {
				
			},
			
			marginData(data) {
				let rs = data.split("#")
				let groupInfo = rs[0]
				
				let killInfo = rs[1]
				let players = groupInfo.split(",")
				let cell = {
					1: [],
					2: [],
					3: [],
					4: [],
					5: [],
					6: [],
					7: [],
					8: []
				}
				let player
				let online
				let max = 0
				for (let p of players) {
					online = (p.slice(p.length - 1, p.length) != "*")
					player = {
						classId: p.slice(0, 1),
						name: p.slice(1, online ? p.length - 3 : p.length - 4),
						role: p.slice(online ? p.length - 3 : p.length - 4, online ? p.length - 2 : p.length - 3),
						groupIndex: p.slice(online ? p.length - 2 : p.length - 3, online ? p.length - 1 : p.length - 2),
						online: online
					}
					cell[player.groupIndex].push(player)
					if (max < parseInt(player.groupIndex)) {
						max = parseInt(player.groupIndex)
					}
					console.log(player)
				}
				this.cell = cell
				if (this.maxGroup.length != max) {
					this.maxGroup = Array(max).fill(0)
				}
				
				// console.log(cell)
				// console.log(groupInfo)
				// console.log(killInfo)
			},
			
			career(id) {
				
				classNames = {
				    "1": "战士",
				    "2": "圣骑士",
				    "3": "猎人",
				    "4": "盗贼",
				    "5": "牧师",
				    "6": "死亡骑士",
				    "7": "萨满",
				    "8": "法师",
				    "9": "术士",
				    "A": " 武僧",
				    "B": "德鲁伊",
				    "C": "恶魔猎手",
				    "D": "唤魔师‌"
				}
				
				return classNames[id]
			}
		}
	}
</script>

<style>

	.connect-0 {
		color: #b0b0b0;
	}
	
	.connect-1 {
		color: #ffaa00;
	}
	
	.connect-2 {
		color: #00aa00;
	}
	
	.connect-3 {
		color: #ff3c01;
	}
	
	.cell-box {
		display: flex;
		background-color: rgba(0, 0, 0, 1);
		padding: 1px;
	}
	
	.cell-group {
		display: flex;
		flex-direction: column;
		min-width: 100px;
	}
	
	.cell {
		max-width: 100px;
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 50px;
		margin: 1px;
	}
	
</style>